<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title>Jw任务管理后台</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <script src="./lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="./js/xadmin.js"></script>
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a>
                    <cite>任务列表</cite></a>
            </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <table id="demo" lay-filter="test"></table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="toolbarDemo">
  <div class = "layui-btn-container" >
    <button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button >
    <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>
  </div >
</script>
<script type="text/html" id="switchTpl">
  <input type = "checkbox" name = "state" value = "{{ d.name }}" lay-skin = "switch" lay-text = "执行|关闭" lay-filter = "sexDemo" {{ d.state == 1 ? 'checked': ''}} >
</script>

<script>
  layui.use('table',
        function() {
          var table = layui.table,form = layui.form;;

          //执行渲染
          //第一个实例
          table.render({
            elem: '#demo'
            ,method:"post"
            ,height: 600
            ,url: '/v1/task/list' //数据接口
            ,page: true //开启分页
            ,contentType:'application/json'
            ,headers:{
              "content-type": "application/json;charset=utf-8",
              "auto":localStorage.getItem('token')
            }
            ,request: {
              pageName: 'page' //页码的参数名称，默认：page
              ,limitName: 'limit' //每页数据量的参数名，默认：limit
           }
            ,response: {
                    statusName: 'code' //规定数据状态的字段名称，默认：code
                    ,statusCode: 200 //规定成功的状态码，默认：0
                    ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                    ,countName: 'count' //规定数据总数的字段名称，默认：count
                    ,dataName: 'data' //规定数据列表的字段名称，默认：data
          }
            ,cols: [[ //表头
              ,{field: 'name', title: '任务名称'}
              ,{field: 'crons', title: '任务表达式',edit: 'text'}
              ,{field: 'url', title: '探活地址',edit: 'text'}
              ,{field: 'state', title: '任务状态',templet:"#switchTpl" }
              ,{field: 'people', title: '通知人列表',edit: 'text'}
              ,{field: 'machine', title: '钉钉机器人',edit: 'text'}
            ]]
            ,id: 'testReload'
            ,done: function(res, curr, count){
              //如果是异步请求数据方式，res即为你接口返回的信息。
              //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
              if(res.code == 500 ){
                localStorage.setItem('token', "null");
                location.href = '/web/login.html'
              }
            }
          });

          //监听单元格编辑
          table.on('edit(test)',function(obj) {
            jsonData = obj.data

            if(Array.isArray(jsonData.people)){
            }else{
              jsonData.people = jsonData.people.split(",")
            }
            jsonData = JSON.stringify(jsonData)
            $.ajax({
              type: "POST",
              url: "/v1/task/up",
              data: jsonData, //必须是字符串
              dataType: "json",
              headers: {"content-type": "application/json;charset=utf-8","auto":localStorage.getItem('token')}, //请求头类型
              success: function (res) {
                if (res.code == 200) {
                  layer.alert("修改成功", {
                    icon: 6
                  },)
                  table.reload('testReload')
                }else if(res.code == 500){
                  localStorage.setItem('token',"null")
                  xadmin.father_reload()
                } else {
                  layer.alert(res.msg, {icon: 5})
                }
              }
            });
         });

          //监听性别操作
          form.on('switch(sexDemo)', function(obj){
            console.log(obj.othis)
            jsonData  = {name:obj.value,state:obj.elem.checked?1:2}
            jsonData = JSON.stringify(jsonData)
            $.ajax({
              type: "POST",
              url: "/v1/task/state",
              data: jsonData, //必须是字符串
              dataType: "json",
              headers: {"content-type": "application/json;charset=utf-8","auto":localStorage.getItem('token')}, //请求头类型
              success: function (res) {
                if (res.code == 200) {
                  layer.msg("修改成功", {
                    icon: 6
                  },)
                }else if(res.code == 500){
                  localStorage.setItem('token',"null")
                  xadmin.father_reload()
                } else {
                  layer.alert(res.msg, {icon: 5})
                }
              }
            });

          });
        });
</script>
</html>